<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>Page Monitor Options</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="shortcut icon" type="image/png" href="image/browser_icon.png" />
    <link rel="stylesheet" type="text/css" href="styles/options.css" />
    <script type="text/javascript" src="lib/jquery-1.7.1.js"></script>
    <script type="text/javascript" src="lib/jquery.colorPicker.js"></script>
    <script type="text/javascript" src="scripts/base.js"></script>
    <script type="text/javascript" src="scripts/options.js"></script>
    <script type="text/javascript" src="scripts/options-entry.js"></script>
  </head>
  <body>
    <h1><span class="i18n" title="options_header"></span></h1>

    <!-- Templates for the page table. -->

    <table id="templates">
      <tr class="page_record">
        <td>
          <div class="page_info">
            <img class="favicon" src="chrome://favicon" alt="Favicon" />
            <a class="page_link" title="Visit Page" href="#">Page</a>
          </div>
          <div class="page_controls">
            <span class="advanced_toggle">
              <label>
                <input type="checkbox" />
                <span class="i18n" title="advanced"></span>
              </label>
            </span>
            <span class="rename">
              <img src="img/rename.png" alt="Rename" />
              <span class="i18n" title="rename_page"></span>
            </span>
            <span class="stop_monitoring">
              <img src="img/stop_monitoring.png" alt="Stop Monitoring" />
              <span class="i18n" title="remove_page"></span>
            </span>
            <span class="last_check">
              <img src="img/refresh.png" class="check_now" alt="Check Now" />
              <img src="img/monitor.png" alt="Last Check" />
              <span class="i18n" title="last_check"></span>:
              <span class="last_check_time"><span class="i18n" title="unknown"></span></span>.
            </span>
            <div class="advanced_controls">
              <div class="page_interval">
                <input type="checkbox" />
                <span class="disabled">
                  <span class="i18n" title="check_every"></span>:
                  <input type="range" disabled="disabled" min="-6" max="20" step="0.01" />
                  <label class="range_value_label"></label>
                </span>
              </div>
              <div class="mode">
                <input type="checkbox" />
                <span class="disabled">
                  <span class="i18n" title="custom_mode"></span>:
                  <select disabled="disabled">
                    <option value="selector" class="i18n" title="selector"></option>
                    <option value="regex" class="i18n" title="regex"></option>
                  </select>
                  <input type="text" disabled="disabled" class="mode_string" />
                  <input type="button" disabled="disabled" value="Test" class="mode_test" />
                  <input type="button" disabled="disabled" value="Pick" class="mode_pick" />
                </span>
              </div>
            </div>
          </div>
        </td>
      </tr>
      <tr class="empty">
        <td>
          <span class="i18n" title="no_pages_monitored"></span>
        </td>
      </tr>
    </table>

    <!-- Pages table. -->

    <table id="pages" class="main_table"></table>

    <!-- Basic opetions. -->

    <div id="basic_options">
      <table>
        <tr>
          <td id="basic_notifications">
            <img src="img/notification.png" alt="Desktop Notifications" />
            <span class="i18n" title="notifications"></span>:
            <select>
              <option value="enabled" class="i18n" title="enabled"></option>
              <option value="disabled" class="i18n" title="disabled"></option>
            </select>
          </td>
          <td id="basic_sound_alert">
            <img src="img/sound.png" alt="Audio Alert" />
            <span class="i18n" title="sound_alert"></span>:
            <select>
              <option value="" class="i18n" title="sound_none"></option>
            </select>
          </td>
          <td id="basic_interval">
            <img src="img/clock.png" alt="Check Interval" />
            <span class="i18n" title="check_every"></span>:
            <input type="range" value="12.8" min="-6" max="20" step="0.01" />
            <label class="range_value_label"></label>
          </td>
        </tr>
      </table>
    </div>

    <!-- Advanced options. -->

    <div id="advanced_options">
      <p id="notifications">
        <img src="img/notification.png" alt="Desktop Notifications" />
        <span class="i18n" title="notifications"></span>
        <select>
          <option value="enabled" class="i18n" title="enabled"></option>
          <option value="disabled" class="i18n" title="disabled"></option>
        </select>
      </p>
      <p id="notifications_timeout">
        <img src="img/notification.png" alt="Desktop Notifications" />
        <span class="i18n" title="notifications_timeout"></span>
        <input type="range" value="30" min="1" max="62" step="1" />
        <label class="range_value_label"></label>
      </p>
      <p id="interval">
        <img src="img/clock.png" alt="Check Interval" />
        <span class="i18n" title="check_every"></span>
        <input type="text" value="180" maxlength="4" />
        <label class="check_every_label"></label>
      </p>
      <p id="sound_alert">
        <img src="img/sound.png" alt="Audio Alert" />
        <span class="i18n" title="sound_alert"></span>
        <select>
          <option value="" class="i18n" title="sound_none"></option>
        </select>
        <button id="play_sound"><span class="i18n" title="sound_play"></span></button>
        <button id="new_sound"><span class="i18n" title="sound_new"></span></button>
        <button id="delete_sound"><span class="i18n" title="sound_delete"></span></button>
      </p>
      <p id="sort">
        <img src="img/sort.png" alt="Sort By" />
        <span class="i18n" title="sort"></span>
        <select>
          <option value="date added" class="i18n" title="sort_date"></option>
          <option value="name" class="i18n" title="sort_name"></option>
          <option value="url" class="i18n" title="sort_url"></option>
          <option value="check interval" class="i18n" title="sort_interval"></option>
          <option value="last check" class="i18n" title="sort_last_check"></option>
          <option value="last change" class="i18n" title="sort_last_change"></option>
        </select>
      </p>
      <p id="animation">
        <img src="img/animation.png" alt="Animation" />
        <span class="i18n" title="animations"></span>
        <select>
          <option value="enabled" class="i18n" title="enabled"></option>
          <option value="disabled" class="i18n" title="disabled"></option>
        </select>
      </p>
      <p id="view_all">
        <img src="img/view_all.png" alt="View All" />
        <span class="i18n" title="view_all_function"></span>
        <select>
          <option value="diff" class="i18n" title="view_diff"></option>
          <option value="original" class="i18n" title="view_original"></option>
        </select>
      </p>
      <p id="badge_color">
        <img src="img/color.png" alt="Badge Color" />
        <span class="i18n" title="badge_color"></span>
        <input type="text" value="#00B400" />
      </p>
      <p id="hide_deletions">
        <img src="img/diff.png" alt="Hide Deletions" />
        <span class="i18n" title="hide_deletions"></span>
        <input type="checkbox" />
      </p>
      <p id="show_full_page_diff">
        <img src="img/diff.png" alt="Show Full Page Diff" />
        <span class="i18n" title="show_full_page_diff"></span>
        <input type="checkbox" />
      </p>

      <div id="actions">
        <span id="import">
          <img src="img/import.png" alt="Import" />
          <span class="i18n" title="import"></span>
        </span>
        <span id="export">
          <img src="img/export.png" alt="Export" />
          <span class="i18n" title="export"></span>
        </span>
        <span id="check_all">
          <img src="img/refresh.png" alt="Check Now" />
          <span class="i18n" title="check_all"></span>
        </span>
      </div>
    </div>

    <!-- Basic/Advanced options switch. -->

    <label id="options_switch">
      <input type="checkbox" />
      <span class="i18n" title="advanced"></span>
    </label>

    <!-- Pop-up forms. -->

    <div id="test_result_form">
      <span class="i18n" title="test_matches"></span>
      <textarea rows="10" cols="80" readonly="readonly">...</textarea>
      <button><span class="i18n" title="close"></span></button>
    </div>

    <div id="export_form">
      <span class="i18n" title="export_prompt"></span>
      <textarea rows="10" cols="80">...</textarea>
      <button><span class="i18n" title="close"></span></button>
    </div>

    <div id="import_form">
      <span class="i18n" title="import_prompt"></span>
      <textarea rows="10" cols="80"></textarea>
      <button id="import_perform"><span class="i18n" title="import_button"></span></button>
      <button id="import_cancel"><span class="i18n" title="cancel"></span></button>
    </div>

    <div id="new_sound_form">
      <label for="new_sound_name" class="i18n" title="sound_name"></label>:
      <input type="text" id="new_sound_name" value="" />
      <label for="new_sound_url" class="i18n" title="sound_url"></label>:
      <input type="text" id="new_sound_url" value="" />
      <div id="new_sound_buttons">
        <button id="new_sound_create"><span class="i18n" title="sound_create"></span></button>
        <button id="new_sound_cancel"><span class="i18n" title="cancel"></span></button>
      </div>
    </div>

    <!--DEV_ONLY-->
    <hr />
    <table style="text-align: center;">
      <tr>
        <td><a href="tests/base.htm">Base Test</a></td>
        <td><a href="tests/background.htm">Background Test</a></td>
        <td><a href="tests/popup.htm">Popup Test</a></td>
        <td><a href="tests/options.htm">Options Test</a></td>
        <td><a href="tests/selector.htm">Selector Test</a></td>
        <td><a href="tests/regex.htm">Regex Test</a></td>
        <td><a href="tests/diff.htm">Diff Test</a></td>
      </tr>
      <tr>
        <td colspan="7">
          <a href="http://code.google.com/p/pagemon-chrome-ext/issues/list">
            <strong>
              Issues List
            </strong>
          </a>
        </td>
      </tr>
    </table>
    <!--/DEV_ONLY-->
  </body>
</html>
